<template>
    <div class="reward">
        <van-nav-bar :title="$t('my.reward')" leftArrow @click-left="_return"/>
        <div class="rewardMain">
            <div class="title">
                <van-row type="flex" justify="space-between">
                    <van-col>
                        <p>{{$t('my.total')}}</p>
                        <span>{{price.zsy}}</span>
                    </van-col>
                    <!--<van-col>-->
                        <!--<p>{{$t('my.available')}}</p>-->
                        <!--<span>{{price.zsy}}</span>-->
                    <!--</van-col>-->
                </van-row>
                <p class="tip">{{$t('my.total_node')}} <span>{{price.jdsy}}</span>{{$t('my.total_invite')}} <span>{{price.yqsy}}</span></p>
            </div>
            <div class="list">
                <ul>
                    <li v-if="mine.list" v-for="item in mine.list.jlinfo">
                        <van-row type="flex" justify="space-between" align="center">
                            <van-col>
                                +{{Number(item.num).toFixed(4)}} {{item.coin_name.toUpperCase()}}
                            </van-col>
                            <van-col>
                                <p>{{item.category}}</p>
                                <span>{{item.add_time}}</span>
                            </van-col>
                        </van-row>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import moment from 'moment'
    export default {
        data() {
            return {
                page:1,
                listNum:'',
                mine:{},
                price:{},
                list:{}
            }
        },
        methods: {
            _return(){
                this.$emit('_return')
            },
            getData(){
                this.$api.get('index/myReward',{page:this.page})
                    .then(res =>{
                        this.mine = res.detail
                        this.price = this.mine.jiedian
                        this.list=res.detail.list;
                        this.mine.list.jlinfo.map(i => {
                            i.category = this.mine.category[i.category]
                            i.add_time = moment(i.add_time*1000).format('YYYY-MM-DD')
                        })
                    })
            },
        },
        created() {
            this.getData()
        },
        mounted() {
            this.$emit('disappear')
        },
    }
</script>

<style lang="stylus" scoped>
    bac = linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);

    [class*=van-hairline]::after{
        border: none;
    }
    .rewardMain
        width 94%
        margin 0 auto 0
        min-height 200px
        .title
            background linear-gradient(90deg,#53d9b5,#2bc299);
            border-radius 5px
            padding 15px
            .van-col
                p
                    font-size 10px
                    color #313131
                span
                    font-size 24px
                    color #fff
                    margin-top 10px
                    display block

            .tip
                font-size 12px
                color #313131
                margin-top 10px
                span
                    margin-right 10px
                    color #115f49
                    margin-left 10px
        .list
            margin-top 10px
            li
                padding 15px
                border-radius 5px
                margin-bottom 5px
                border-bottom 1px solid #ebebeb
                .van-col
                    font-size 20px
                    color #23ba92
                    p
                        font-size 14px
                        color #f6543e
                    span
                        font-size 10px
                        color #2c2c2c

</style>
